<!DOCTYPE html>
<html>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" href="css/demo.css" type="text/css">
	<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
<title>文件上传表单</title>

<!-- <script src='ListDirfile.js' type="text/javascript"></script> -->
 <!-- <script> -->
                    <!-- exports.initialize2 = function(req, res){ -->
   <!-- console.log('initializing2');  -->
   <!-- res.send("来自服务器的响应"); } -->
 <!-- </script> -->
  <script type="text/javascript" src="JSON-js/json2.js"></script>
 <script>
 	console.log(window.location.href);
		console.log(window.location.port);
		console.log(window.location.protocol);
		console.log(window.location.host);
 function printclik()
 {
	alert("123");
	window.print(); 
 }
 function GetUrl(url)
 {
 alert('1');
	  var xmlhttp;
         var str;
          if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
          }
          else
          {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange=function()
          {
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
              {
                  str = xmlhttp.responseText;//得到服务器响应
					 alert(str);
					DirPa(str);
              }
         }
         function getFilename(file) {
             var get = file.lastIndexOf("/");
             return file.substring(get + 1);
         }
	
          xmlhttp.open("GET",'/www',true);
          xmlhttp.send();
}
	console.log(window.location.href);
		console.log(window.location.port);
		console.log(window.location.protocol);
		console.log(window.location.host);
                        //AJAX
function loadXMLDoc()
{
     var xmlhttp;
    var str;
     if (window.XMLHttpRequest)
     {// code for IE7+, Firefox, Chrome, Opera, Safari
         xmlhttp=new XMLHttpRequest();
     }
     else
     {// code for IE6, IE5
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     xmlhttp.onreadystatechange=function()
     {
         if (xmlhttp.readyState==4 && xmlhttp.status==200)
         {
             str = xmlhttp.responseText;//得到服务器响应
			 alert(str);
           // str='["1.js","app.js","app11.js","express_server - 副本 (2).js","express_server - 副本.js","express_server.js","favicon.ico","FindFile.js","formParser.js","hello.js","http.js","httpServer.js","index.html","index.js","index2.html","linshi/","mime.js","mine.js","node_modules/","public/","requestHandlers.js","router.js","server.js","upload/","upload.html","upload.js","www/"]';
			
			
			// json 排序
			
			strToJosn(str);
			
			//json处理方式
			DirPa(str);
			// alert(obj.BlockList.length);
			// for(var i = 0; i < obj.BlockList.length; i++) 
			// {
			// 	  filePath = obj.BlockList[i];
			// 	  var arr = filePath.split('/');
			// 	  var len = arr.length;
			// 	  return arr[len-1];
			// }
            //document.getElementById("myDiv").innerHTML=str;
         }
    }
	
	function strToJosn(str)
	{
	
		// str转换为json 对象
		var obj = JSON.parse(str);
		// 第一次 直接遍历出所有一级目录的的文件 并且创建对应的目录的
		var treejosn = "";
		var vfiles= obj.Msg;
		var j = 1;
		var bHas = false; // 记录是否包含有点
		var id= 0;

		
		
		var root={
		name:"root",
		children:[]
		}
		var file2 =	{ id:1, pId:0, name:"root", open:true,dir:0,isParent:true};	
		root.children.push(file2);
		var Gid=1;
		for(var i = 0;i < vfiles.length;i++)
		{
			var vname = vfiles[i].name;
			var arr = vname.split('/');
			var len = arr.length;
			// 
			var curNode = root;
		
			if( len  == 2 )// 最后一个 那么就是文件名称 
			{
				var file =	{ id:1, pId:1, name:"父节点1 - 展开", dir:0,url:""};
				file.id = ++Gid;
				file.pId = 1;
				file.name = arr[1];
				file.path= vname;
				file.dir = len -1;
				file.url = vfiles[i].url;
				root.children.push(file);
			}
			else
			{
				//var dir  =  {id:111, pId:11, name:"叶子节点111",open:true,dir:1};
				var pid = 1; // 根节点
				for(var j = 1; j< len - 1; j++)
				{
					
					// 查询是否目录目录已经被添加	
					var bFind = false;					
					for(var ndir = 0; ndir < root.children.length; ndir++)
					{
						if(root.children[ndir].dir == j )
						{
							if(root.children[ndir].name == arr[j]) // 已经有这个阶段 就不需要添加了的
							{
								bFind = true;
								pid = root.children[ndir].id;
								if(j+1 == len - 1 ){ // 最后一个数组 是文件名称 
									var file =	{ id:1, pId:1, name:"父节点1 - 展开", dir:0};
									file.id = ++Gid;
									file.pId = dir.id;
									file.name = arr[j+1];
									file.path= vname;
									file.dir = j;
									file.url = vfiles[i].url;
									root.children.push(file);
								}
								break;
							}
						}
					}
					if(!bFind) // 需要新增节点数据 
					{
						var dir  =  {id:111, pId:11, name:"叶子节点111",open:false,dir:1,url:""};
						dir.id = ++Gid;
						dir.pId = pid;
						dir.name = arr[1];						
						dir.dir = j;
						root.children.push(dir);
						// 如果是倒数文件名称前一级目录的时候 需要置一下当前父节点
						if(j+1 == len - 1 ){ // 最后一个数组 是文件名称 
							var file =	{ id:1, pId:1, name:"父节点1 - 展开", dir:0};
							file.id = ++Gid;
							file.pId = dir.id;
							file.name = arr[j+1];
							file.path= vname;
							file.dir = j;
							file.url = vfiles[i].url;
							root.children.push(file);
						}
					}
				}
			}
			
		}	
		var setting = {
		data: {
				simpleData: {
					enable: true,
		
				},
			
			}
		};
		
		<!-- var setting = { -->
			<!-- view: { -->
				<!-- addHoverDom: addHoverDom, -->
				<!-- removeHoverDom: removeHoverDom, -->
				<!-- addDiyDom: addDiyDom -->
			<!-- } -->
		<!-- }; -->
		var vet = JSON.stringify( root.children );
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, root.children);
		});
	}

    function getFilename(file) {
        var get = file.lastIndexOf("/");
        return file.substring(get + 1);
    }

     xmlhttp.open("GET","http://localhost:3002/file_query?name=&path=bugzip",true);
     xmlhttp.send();
   }
   function DirPa(str)
   {
		var obj = JSON.parse(str);
            var catalog = [];
            for (var i = 0;i < obj.length;i++){
                catalog[i] = obj[i];
            }
            catalog.sort(function(a,b){
                if(a.indexOf("/") == -1){
                    a = 1;
                }else {
                    a = 0;
                };
                if(b.indexOf("/") == -1){
                    b = 1;
                }else {
                    b = 0;
                };
                return a-b;
            })
            var add = '<ul id="catalog">';
            for (var i = 0 ;i < catalog.length;i++){
                var arr = catalog[i].split("/");
                if(arr.length == 2){
                    add += '<li><a id="' + arr[0] + '"onclick="GetUrl(' + arr[0] + ')" href="javascript:void(0);">' + arr[0] + '</a></li>';
                }else {
                    add += '<li>' +arr[0] + '</li>';
                };
            }
            add += '</ul>';
            $("body").append(add);
   }
</script>
	
</HEAD>
<body>
<h3>文件上传：</h3>
选择一个文件上传: <br />
<form action="./file_upload" method="post" enctype="multipart/form-data">
<input type="file" name="name" size="50" />
<br/> 
文件路径: <input type="文件路径" name="path"><br>
是否解压zip文件: <input type="是否解压zip" name="ziptype"><br/>
<br />
<input type="submit" value="上传文件" />
</form>
<form action="./file_query" method="get">
文件名称: <input type="文件名称" name="name">  <br/>
<br/> 
文件路径: <input type="文件路径" name="path"><br/>
<br/>
<input type="submit" value="查询"><br/>
</form>

<form action="./file_delete" method="get">
文件名称: <input type="文件名称" name="name">  <br>
<br> 
文件路径: <input type="文件路径" name="path"><br>
<br>
<input type="submit" value="删除"><br>

</form>

<form action="./file_download" method="get">
文件名称: <input type="文件名称" name="name">  <br>
<br> 
文件路径: <input type="文件路径" name="path"><br>
<br>
<input type="submit" value="下载"><br>

</form>

<button type="button" onclick="loadXMLDoc()">请求数据</button>
<button type="button" onclick="printclik()">打印</button>
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
</div>
</body>
</html>